<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>橙子之家</title>
    <link rel="stylesheet" href="sider.css">
    <style>
        html,
        body {
            height: 100%;
        }

        /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
        /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
        @font-face {
            font-family: "Thin";
            src: url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff2") format("woff2"),
                url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff") format("woff");
            /* src: url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff2") format("woff2"), */
            /* url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff") format("woff"); */
            font-display: swap;
        }

        /* webSite/assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff */
        /* webSite/assert/font/uGFLnLcckjCC/Z1eaFFZZPDjN.woff */
        body {
            background: #006666;
        }

        .container {
            background: url('./assert/img/bg3.png') no-repeat center;
            background-size: cover;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;

        }

        .container h1 {
            color: #d5950b;
            font-size: 120px;
            text-align: center;
            /* 更改字体 */
            font-family: "Thin", Arial, sans-serif;
            /* 使用新字体 */
            position: absolute;
            top: 10%;
            left: 10%;
            /* transform: translate(-50%, -50%); */
        }

        .container form h2 {
            color: #7e5908;
            font-size: 30px;
            text-align: center;
            /* 使用新字体 */
            position: absolute;
            top: 10%;
            left: 33%;
            /* transform: translate(-50%, -50%); */
        }


        form {
            background: orange;
            height: 40%;
            width: 30%;
            border-radius: 10px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;

        }

        form .formContainer {
            height: 80%;
            width: 100%;
            padding: 8% 10%;
        }

        label {
            color: #000;
            font-weight: bold;
            font-size: 20px;
            margin-left: 40px;
        }

        input {
            text-align: left;
            margin: 10px;
        }

        .input {
            width: 80%;
            height: 35px;
            margin-left: 40px;
        }

        .checkbox {
            margin-left: 30px;
        }

        a {
            text-decoration: none;
            font-weight: bold;
        }

        .submit {
            display: inline-block;
            margin-top: 5%;
            margin-left: 7%;
            background: #000;
            border: none;
            color: #FFF;
            height: 35px;
            width: 80%;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }

        .right {
            position: absolute;
            right: 22%;
            bottom: 17%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>WelCome to the home of oranges</h1>
        <!-- form表单注册区域-->
        <form>
            <div class="formContainer">
                <h2>欢迎来到橙子之家</h2>
                <br>
                <!-- 用户名区域 -->
                <label for="username">用户名</label><br>
                <input type="text" name="username" id="username" class="input" value="" placeholder="请输入用户名"><br>
                <!-- 密码区域 -->
                <label for="pwd">密码</label><br>
                <input type="password" name="" id="pwd" class="input" value="" placeholder="请输入密码">
                <!-- 勾选记住密码区域 -->
                <div class="checkbox">
                    <input type="checkbox" name="">
                    <span>记住密码</span>
                </div>
                <!-- 底部勾选登陆区域 -->
                <button type="submit" class="submit" onclick="return submits(this)">开始登录</button><br>
                <a href="register.html" class="right">没有账号？注册账号</a>
            </div>
        </form>
    </div>
    <script>
        function submits(button) {
            var userName = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;

            if (userName === "admin" && pwd === "admin") {
                alert("登录成功！");
                // 跳转首页
                window.location.href = "home.html"; // 确保跳转代码在此处执行
            } else {
                alert("用户名或密码不正确！");
            }
            return false; // 阻止表单的默认提交行为
        }
    </script>
</body>

</html>